<template>
  <div class="boxShadow">
    <div
      class="estate-item"
      v-if="info"
      :class="itemBorder && 'van-hairline--bottom'"
      :style="itemStyle()"
    >
      <div
        class="poster-item"
        v-if="styleType && (info.advertisingImgUrl || info.inlayObjectType )"
        @click="mainAreaClickHandler"
      >
        <div class="poster-title">
          <p class="content">
            <span class="text">{{ info.slogan }}</span>
            <span class="btn" v-if="!preview && !info.inlayObjectType" @click.stop="editLable">编辑广告语</span>
          </p>
        </div>
        <div class="poster-image">
          <img :src="info.advertisingImgUrl" alt="海报" />
        </div>
        <div class="poster-other">
          <p>
            <span class="icon-box">
              <!-- <svg class="icon-svg" aria-hidden="true">
                <use xlink:href="#icon-logo" />
              </svg>-->
              <img :src="userInfo.appLogo" alt />
            </span>
            <span class="text gray">{{userInfo.appName}}</span>
          </p>
          <p>
            <span class="icon-box">
              <svg class="icon-svg" aria-hidden="true">
                <use xlink:href="#icon-chakanxiangqing" />
              </svg>
            </span>
            <span class="text blue">了解详情</span>
          </p>
        </div>
      </div>
      <div class="main-continer" @click="mainAreaClickHandler" v-else>
        <div
          class="bg_img left-box"
          :style="{backgroundImage:'url(' + ((info&&info.thumbHeadImgUrl) ? info.thumbHeadImgUrl : (info&&info.linkerUrl) ? info.linkerUrl : '') + ')'}"
        >
          <img class="panorama-mark" :src="panoramaImg" v-if="info&&info.ifPanorama" />
        </div>
        <div class="right-box">
          <h5 class="estate-name">
            <span :class="{'estate-name-box':isInArticle==1}">
              <!-- <span class="free" v-if="info.isFree&&isInArticle!=1&&isInArticle!=0">免费</span> -->
              {{info && info.linkerName}}
            </span>
            <span v-if="info.saleStatus==0 && isInArticle==1" class="house-sale-status">热销中</span>
            <span v-if="info.saleStatus==1 && isInArticle==1" class="house-sale-status">即将发售</span>
            <span v-if="info.saleStatus==3 && isInArticle==1" class="house-sale-status">售罄</span>
          </h5>
          <p class="estate-location">
            {{`${info && info.city} ${ info && info.district ? info.district : '' }`}}
            <span
              v-if="info.buildArea"
            >| {{info&&info.buildArea ? `建面${info.buildArea}${info.buildArea.indexOf('㎡') > -1 ? '':'㎡'}`:'建面暂无'}}</span>
          </p>
          <!-- <tag-group class="tag-box" v-if="isInArticle==1" :arr="this.info&&this.info.projectTagArr" /> -->
          <tag-group
            class="tag-box"
            :arr="this.info&&this.info.linkerTags||this.info&&this.info.projectTagArr"
          />
          <div class="estate-info">
            <p
              class="estate-price"
              v-if="info.price==='0 万元/套起' || info.price==0 || info.price=='0 元/㎡'"
            >价格待定</p>
            <p class="estate-price" v-else>{{info&&info.price}}{{info&&info.priceUnit}}</p>
            <!-- <p class="estate-area"></p> -->
          </div>
        </div>
      </div>

      <div
        class="extension"
        v-if="info.aBoolean && !!userInfo.selfSupport"
        :class="styleType && info.advertisingImgUrl ? 'poster-info' : 'building-info' "
      >
        <div class="tag-part">
          <span class="tag">推广有礼</span>
          <span
            class="text"
          >{{ `每次推广最高获取${ (info.browseDivide / 100 + info.clicksDivide / 100).toFixed(2) }元`}}</span>
        </div>
      </div>
    </div>

    <div
      class="specialOffer"
      v-if="(!styleType && info && info.promotionalLanguage) || (info && info.sale && !styleType)"
      :style="{ border: preview && '1px solid rgba(177, 189, 210, 0.5)'}"
    >
      <p class="offer1" v-if="info.promotionalLanguage">
        <img :src="offerTeIMg" width="16" height="16" alt="特" />
        {{info.promotionalLanguage}}
      </p>
      <p class="offer2" v-if="info.sale">
        <img :src="offerHuiIMg" width="16" height="16" alt="惠" />
        {{info.sale}}
      </p>
      <p class="offer2" v-if="info.divisionRules">
        <img :src="commissionImg" width="16" height="16" alt="佣" />
        {{ info.divisionRules | textOver }}
      </p>
    </div>
    <div class="house-activity-poster" v-if="showCard && info&&info.cpActivityVo">
      <img class="img" :src="info.cpActivityVo.imgUrl" />
      <p class="info">
        <span class="title">{{info.cpActivityVo.name}}</span>
        <span class="btn">立即领取</span>
      </p>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import TagGroup from 'COMP/TagGroup'
export default {
  props: {
    info: { type: Object },
    showRules: { type: Boolean, default: true },
    itemBorder: { type: Boolean, default: false },
    showCard: { type: Boolean, default: false },
    isInArticle: { type: Number, default: 0 },
    preview: { type: Boolean, default: false },
    styleType: {
      type: Number,
      // 0 默认列表风格   1 显示海报风格
      default: 0
    },
    conf: {
      type: Object,
      default: () => {
        return {
          op: ''
        }
      }
    }
  },
  components: {
    TagGroup
  },
  created() {},
  computed: {
    ...mapGetters(['userInfo'])
  },
  data: () => ({
    offerTeIMg: require('IMG/discover/te.png'),
    offerHuiIMg: require('IMG/discover/hui.png'),
    panoramaImg: require('IMG/system/icon_panorama@2x.png'),
    commissionImg: require('IMG/user/collection/icon_commission@2x.png')
  }),
  methods: {
    itemStyle() {
      let obj = {}
      let info = this.info
      if (info && info.divisionRules) obj.paddingBottom = '15px'
      if (!this.preview && (info.sale || info.promotionalLanguage || info.divisionRules)) obj.borderBottom = '1px solid rgba(177,189,210,0.5)'
      if (this.preview) obj.border = '1px solid rgba(177,189,210,0.5)'
      // {paddingBottom:(info&&info.divisionRules)&&'15px', borderBottom: !preview && '1px solid rgba(177,189,210,0.5)',border: preview&& '1px solid rgba(177,189,210,0.5)'}"
      return obj
    },
    mainAreaClickHandler() {
      this.$emit('click', this.info)
    },
    editLable() {
      // this.$emit("edit")
      this.$parent.$parent.editLabelValue = this.info.slogan
      this.$parent.$parent.isVisibleLabelDialog = true
    },
    shareHandler() {
      this.$emit('share', this.info)
    }
  }
}
</script>
<style lang="less" scoped>
.extension {
  padding: 0 0.42667rem;
  font-size: 12px;

  &.poster-info {
    padding: 16px;
    padding-top: 0;
  }
  &.building-info {
    margin-top: -4px;
    padding: 16px;
    padding-top: 0;
  }
  .tag-part {
    display: flex;
    align-items: center;
  }
  .tag {
    color: #fff;
    text-align: center;
    line-height: normal;
    background: #eb602f;
    padding: 3px 4px;
    border-radius: 4px 0px 0px 4px;
  }
  .text {
    flex: 1;
    line-height: normal;
    color: #eb602f;
    background: #fdefea;
    padding: 3px 4px 3px 10px;
    border-radius: 0px 4px 4px 0px;
  }
  // .part {
  //   padding: 8px;
  //   background: #DAE9FF;
  //   border-radius: 4px;
  //   .tag {
  //     line-height: normal;
  //     padding: 1px 4px;
  //     background: #EB602F;
  //     color: #fff;
  //   }
  //   .text {
  //     padding-left: 8px;
  //     color: #EB602F;
  //   }
  // }
}

.specialOffer {
  padding: 12px 16px;
  line-height: 24px;
  // border: 1px solid rgba(177, 189, 210, 0.5);
  border-top: 0 !important;
  p {
    display: flex;
    display: -webkit-box-flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    font-size: 14px;
    line-height: normal;
    img {
      width: 16px;
      height: 16px;
      margin-right: 4px;
    }
  }
  .offer1 {
    color: #13284d;
  }
  .offer2 {
    color: #ea4d2e;
    margin-top: 8px;
  }
}
.estate-item {
  position: relative;
  overflow: hidden;
  line-height: 1;
  width: 100%;
  margin: 0;
  padding: 0;
  // border:1px solid rgba(177,189,210,0.5);
  > .main-continer {
    word-wrap: none;
    display: flex;
    > .left-box {
      position: relative;
      background-color: #999999;
      border-radius: 6px;
      width: 120px;
      min-width: 120px;
      height: 90px;
      margin: 16px;
      padding: 0;
      flex-basis: 120px;
      > .panorama-mark {
        position: absolute;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        width: 32px;
        height: 32px;
        object-fit: cover;
      }
    }
    > .right-box {
      flex-basis: 225px;
      margin: 16px 16px 16px 0;
      padding: 0;
      > .estate-name {
        display: flex;
        align-items: center;
        // justify-content: space-between;
        // font-family: PingFangSC-Semibold;
        font-size: 16px;
        font-weight: 600;
        color: #333333;
        padding-bottom: 6px;
        .free {
          display: inline-block;
          font-size: 10px;
          height: 14px;
          line-height: 14px;
          background: rgba(234, 77, 46, 1);
          color: #fff;
          border-radius: 2px;
          margin-right: 2px;
          padding: 0 5px;
          vertical-align: top;
        }
        .estate-name-box {
          display: inline-block;
          flex: 1;
          max-width: 3.5rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          padding-top: 4px;
        }
        .house-sale-status {
          display: inline-block;
          white-space: nowrap;
          font-size: 10px;
          padding: 0 4px;
          border-radius: 1px;
          line-height: normal;
          background: rgba(0, 120, 255, 0.15);
          color: #007ae6;
        }
      }
      > .estate-location {
        font-size: 12px;
        font-weight: 400;
        color: #40516f;
        padding-top: 1px;
        padding-bottom: 3px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 180px;
      }
      > .tag-box {
        padding: 5px 0;
        // margin-left: -5px;
      }
      > .estate-info {
        white-space: nowrap;
        line-height: 22px;
        display: flex;
        padding-top: 2px;
        > p {
          display: inline-block;
        }
        > .estate-price {
          color: #ea4d2e;
          font-size: 15px;
          font-weight: 600;
          padding-right: 12px;
          font-family: PingFangSC-Semibold;
        }
        > .estate-area {
          font-size: 12px;
          font-weight: 400;
          color: #999999;
          flex: 1;
          font-family: PingFangSC-Regular;
        }
      }
    }
  }
  > .poster-item {
    background: #fff;
    // border: 1px solid #E9E9E9;
    .poster-title {
      color: #333;
      font-size: 14px;
      line-height: 22px;
      padding: 10px;
      .content {
        overflow: hidden;
        .text {
          margin-right: 6px;
        }
        .btn {
          color: #fff;
          font-size: 12px;
          background: #007ae6;
          border-radius: 4px;
          display: inline-block;
          line-height: 20px;
          padding: 0 6px;
        }
      }
    }
    .poster-image {
      height: 195px;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .poster-other {
      display: flex;
      justify-content: space-between;
      padding: 12px 16px;
      font-size: 12px;
      .icon-box {
        width: 24px;
        height: 24px;
        float: left;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .text {
        margin-left: 6px;
        line-height: 24px;
      }
      .gray {
        color: #8c8d8e;
      }
      .blue {
        color: #4584ee;
      }
      .icon-svg {
        width: 24px;
        height: 24px;
        fill: currentColor;
        overflow: hidden;
      }
    }
  }
  > .operate-box {
    position: absolute;
    top: 8px;
    right: 10px;
    > .share-icon {
      width: 100%;
      height: 100%;
    }
  }
  > .commission-box {
    position: relative;
    width: 90%;
    height: 34px;
    line-height: 34px;
    margin: 0 5%;
    background: #f7f9fa;
    border-radius: 4px;
    display: flex;
    align-items: center;
    > .bottom-view-img {
      width: 16px;
      height: 16px;
      margin-left: 8px;
    }
    span {
      color: #333333;
      font-size: 13px;
      margin-left: 8px;
      font-family: PingFangSC-Regular;
    }
  }
}
.house-activity-poster {
  position: relative;
  height: 100px;
  overflow: hidden;
  margin-top: 12px;
  .img {
    min-height: 100%;
    min-width: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
  }
  .info {
    position: relative;
    margin-top: 64px;
    display: flex;
    .title {
      flex: 1;
      overflow: hidden;
      font-size: 20px;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
      color: #fff;
      padding: 0 16px;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .btn {
      display: inline-block;
      color: #f4655f;
      font-size: 12px;
      border: 1px solid #f4655f;
      padding: 0 10px;
      border-radius: 12px;
      background-color: #fff;
      margin-right: 16px;
      height: 24px;
      line-height: 24px;
    }
  }
}
</style>
